<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            width: 350px;
        }

        .item {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: #56a5f1;
            color: whitesmoke;
            text-align: center;
            line-height: 100px;
            font-weight: 900;
            margin-left: 10px;
            margin-bottom: 10px;
        }

        .active {
            background-color: #999;
        }
    </style>
</head>

<body>
    <div class="content">
    </div>

    <script>
        // 转动的顺序
        var order = [0, 1, 2, 5, 8, 7, 6, 3];
        // 当前选中的元素
        var orderIndex = 0;
        // div的内容
        var list = [
            '600元优惠券',
            '800元优惠券',
            '1000元优惠券',
            '800元优惠券',
            '600元优惠券',
            '1000元优惠券',
            '800元优惠券',
            '600元优惠券',
        ]

        function renderPage() {
            var big = document.querySelector('.content');
            for (var i = 0; i < list.length; i++) {
                // 生成元素
                var el = document.createElement('div');
                // 加class
                el.className = 'item';
                // 加文字
                el.innerHTML = list[i];
                // 追加元素
                big.appendChild(el)
            }
            // 准备按钮所在的元素
            // 生成元素
            var el = document.createElement('div');
            // 加class
            el.className = 'item';
            var btn1 = document.createElement('button');
            btn1.innerHTML = '开始';
            btn1.className = 'begin';
            var btn2 = document.createElement('button');
            btn2.innerHTML = '停止';
            btn2.className = 'end';
            // 将按钮加到div中
            el.appendChild(btn1)
            el.appendChild(btn2)
            // 将带有按钮的div放到指定位置
            big.insertBefore(el, document.getElementsByClassName('item')[4])

            // 给第一个元素加上.active
            document.querySelector('.item').className = 'item active'
        }


        // 初始化
        window.onload = initPage();

        function initPage() {
            renderPage();
            // 此时 页码上的数据已经加载完成
            var begin = document.querySelector('.begin');
            begin.onclick = function () {
                // 开始转
                setInterval(function () {
                    // 取消当前的选中 增加下一个的选中
                    document.querySelectorAll('.item')[order[orderIndex]].className = 'item';
                    if(orderIndex<=6) {
                        document.querySelectorAll('.item')[order[orderIndex+1]].className = 'active item';
                    }else {
                        orderIndex = -1
                        document.querySelectorAll('.item')[order[0]].className = 'active item';
                    }
                    orderIndex++
                }, 100)
            }
        }

    </script>
</body>

</html>